<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="c1" width="600" height="600"></canvas>

    <script>
        // 获取画布
        var c1 = document.getElementById("c1")
        // 获取画笔
        let ctx = c1.getContext("2d")

        // Path2D 封装路径
        let heartPath = new Path2D()
        heartPath.moveTo(300, 200)
        heartPath.bezierCurveTo(350, 150, 400, 200, 300, 300)
        heartPath.moveTo(300, 200)
        heartPath.bezierCurveTo(250, 150, 200, 200, 300, 300)
        ctx.stroke(heartPath)  // 绘制路径


        let chatPath = new Path2D()
        ctx.moveTo(200, 300)
        // ctx.quadraticCurveTo(x1,y1,x,y); x,y是终点坐标，x1,y1是曲线控制点坐标
        chatPath.quadraticCurveTo(150, 300, 150, 200)
        chatPath.quadraticCurveTo(150, 100, 300, 100)
        chatPath.quadraticCurveTo(450, 100, 450, 200)
        chatPath.quadraticCurveTo(450, 300, 250, 300)
        chatPath.quadraticCurveTo(250, 350, 150, 350)
        chatPath.quadraticCurveTo(200, 350, 200, 300)
        ctx.stroke(chatPath)  // 绘制路径

        // 创建一条折线
        // M10 10表示起点是10，10   h 80 表示水平移动80   v 表示垂直移动80 h -80 表示水平移动-80  z表示回到起点
        let polyline = new Path2D("M10 10 h 80 v 80 h -80 z")
        ctx.stroke(polyline)
    </script>
</body>

</html>